<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    说明：计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
    <p>{{sum}}</p>

</div>
<script>
    new Vue({
        el: '#app',
        data:{
            books:[{bookname:"哈利波特",price:15},{bookname:"简",price:33}]

        },

        computed: {
            sum: function() {
                var result = 0;
                for (var i = 0; i < this.books.length; i++) {
                    result = Number(this.books[i].price) + result;
                };
                return result;
            }
        }
    })
</script>
</body>
</html>
